<template>
  <div class="cpu-info">
    <el-card v-loading="loading">
      <div class="tab-header">
        <span>CPU信息</span>
        <el-icon class="refresh-icon" @click="refresh">
          <Refresh />
        </el-icon>
      </div>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="处理器">
          {{ info?.name }}
        </el-descriptions-item>
        <el-descriptions-item label="制造商">
          {{ info?.manufacturer }}
        </el-descriptions-item>
        <el-descriptions-item label="当前频率">
          {{ info?.clock_speed }}
        </el-descriptions-item>
        <el-descriptions-item label="最大频率">
          {{ info?.max_clock_speed }}
        </el-descriptions-item>
        <el-descriptions-item label="核心/线程">
          {{ info?.cores }}/{{ info?.threads }}
        </el-descriptions-item>
        <el-descriptions-item label="二级缓存">
          {{ info?.l2_cache }}
        </el-descriptions-item>
        <el-descriptions-item label="三级缓存">
          {{ info?.l3_cache }}
        </el-descriptions-item>
        <el-descriptions-item label="电压">
          {{ info?.voltage }}
        </el-descriptions-item>
        <el-descriptions-item label="处理器ID">
          {{ info?.processor_id }}
        </el-descriptions-item>
        <el-descriptions-item label="插槽">
          {{ info?.socket }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          {{ info?.status }}
        </el-descriptions-item>
        <el-descriptions-item label="架构">
          {{ info?.architecture }}
        </el-descriptions-item>
        <el-descriptions-item label="系列">
          {{ info?.family }}
        </el-descriptions-item>
        <el-descriptions-item label="数据宽度">
          {{ info?.data_width }}
        </el-descriptions-item>
        <el-descriptions-item label="地址宽度">
          {{ info?.address_width }}
        </el-descriptions-item>
        <el-descriptions-item label="使用率">
          <el-progress :percentage="parseFloat(info?.usage)" :format="percentageFormat" />
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Refresh } from '@element-plus/icons-vue'
import { getCpuInfo } from '/@/api/monitor'

const info = ref({} as any)
const loading = ref(false)

const percentageFormat = (percentage: number): string => `${percentage}%`

const refresh = async () => {
  try {
    loading.value = true
    const { data } = await getCpuInfo()
    info.value = data.cpu
  } finally {
    loading.value = false
  }
}

defineExpose({
  refresh
})
</script>

<style lang="scss" scoped>
@import '../styles/common.scss';
</style> 